/* js 总入口 */

// 导入基本模块
import Vue from 'vue';
import app from './App.vue';
import VueRouter from 'vue-router';
Vue.use( VueRouter );

//导入 vue 缩略插件,并注册
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//导入 饿了么 ui 框架 做顶部固定栏
/* import { Header, Swipe, SwipeItem, Toast, Button, Lazyload } from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
// console.log(Toast);
Vue.use( Lazyload );该模块在按需导入的时候不好用，需要全部加载才可以用，又是它的一个坑。
全部加载又把 toast 组件在全局的定义搞乱了，导致页面全没了，注释掉之后恢复正确，并且后面同样不能以 Toast() 去调用，
依然得用 this.$toast() 调用，只有放到局部导入 Toast 的方式，才可以用 Toast() 的形式调用*/
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

// Vue.$toast = Vue.prototype.$toast = Toast;// mint-ui 官方文档的坑啊，从此学会找实例，导入的组件都挂到构造函数上了
import router from './router.js';  // 路由入口文件不能在前面导入了，否则外部引进来的有些不是全局变量的插件，就坑了，这个 Toast 就是个坑，最好放在 new Vue 实例前面，其他的后面

//导入 MUI 库，做底部按钮
import './lib/mui/css/mui.min.css';
import './lib/mui/css/icons-extra.css';
import './lib/mui/fonts/mui.ttf';

// 导入 vue-resource 并注册到vue，发送数据请求，注册完之后，每个组件就可以使用了
import VueResource from 'vue-resource';
Vue.use( VueResource );
// 配置全局请求后台服务器地址
Vue.http.options.root = 'http://vue.studyit.io';
Vue.http.options.emulateJSON = true;  //配置 post 请求头

//定义一个全局过滤器，各个页面都可以使用
import moment, { locales } from 'moment'; // 导入时间格式化插件
Vue.filter('dateFormat', function (dateStr, pattern = "YYYY-MM-DD hh:mm:ss") {
    return moment(dateStr).format(pattern); // moment 官方文档查看各种格式化方式怎么使用
})

// 单独做一个 评论 comment 组件，挂到需要评论的页面里，注意这是个子组件，不是个路由
import comment from './components/home/subcomponents/comment.vue';
Vue.component('comment-box', comment);// 全局组件，全局注册，别犯2....

//导入轮播图组件，注册为全局组件
import swipeCom from './components/home/subcomponents/swipe.vue';
Vue.component('swipeCom', swipeCom);

// 导入状态管理工具
import Vuex from 'vuex';
Vue.use(Vuex);
const car = JSON.parse( localStorage.getItem('car') || '[]' ); // 其实应该从后台获取的
const store = new Vuex.Store({ // 创键 Store 实例，传入配置对象
    state: { // 数据保存对象
        //car: [], // 购物车中只有一个商品，多个商品就用数组存放呗，每个商品携带有很多信息，那么每个商品就是个对象呗
        car, // 拿到后台(本地存储)保存的数据，交到这里
    },
    mutations: { // 数据操作(修改)对象
        addCarData (s,d) { // 接收购物车里商品信息的总体数据，这个函数内的数据操作的逻辑需要好好思考
            let flag = false;
            s.car.some( v => { // 用数组的 some() 方法进行匹配，有就不用再保存了，没有才保存
                if ( v.id === d.id ) {
                    v.num += parseInt(d.num);
                    flag = true; // 有，关掉开关
                    return true;
                }
            })
            if (!flag) { // 没有，就添加到 car 里
                s.car.push(d); // 这些数据其实最后提交给后台了，但是这里模拟存储本地
            }
            localStorage.setItem( 'car', JSON.stringify(s.car) )
        },
        updateGoodsNum (s,d) { // 调整购物车内对应id商品的购买数量(购物车页面里的操作)
            s.car.some(v => {
                if (parseInt(v.id) === parseInt(d.id)) { // 这个数据不是首次存储时候的数据，它可能是从本地存储拿到的数据，是个字符串，一个小 bug ......addCarData()里面的也可以转换下
                    v.num = parseInt(d.num);
                    return true;
                }
            })
            localStorage.setItem('car', JSON.stringify(s.car)); // 修改完成，继续保存到本地
        },
        delGoods (s,d) { // 删除按钮删除商品
            s.car.some( (v, i) => {
                if (parseInt(v.id) === parseInt(d)) {
                    s.car.splice(i, 1);
                    return true;
                }
            })
            localStorage.setItem('car', JSON.stringify(s.car)); // 继续保存到本地
        },
        selectedGoods (s,d) { // 开关按钮选中购物车中购买的物品
            s.car.some((v) => {
                if (parseInt(v.id) === parseInt(d.id)) {
                    v.isbuy = d.isbuy
                    return true;
                }
            })
            localStorage.setItem('car', JSON.stringify(s.car)); // 继续保存到本地
        }
    },
    getters: {  // 数据提供对象
        badgeNum (s) { // 提供购物车徽标数据
            let n = 0;
            s.car.forEach(v => {
                n += v.num;
            })
            return n;
        },
        renderGoodsNum (s) {  // 提供对应id的商品的购买数量，给购物车页面里的 input 框用
            let o = {};
            s.car.forEach(v => {
                o[v.id] = v.num;
            });
            return o;
        },
        renderIsBuy (s) { // 提供商品选中按钮的值
            let o = {};
            s.car.forEach(v => {
                o[v.id] = v.isbuy;
            })
            return o;
        },
        renderSelectedGoodsTotal (s) { // 提供选中购买生概念品的总价和总件数
            let o = {
                totalNum:0, // 别忘了给他们赋值，不然下面 += 运算为 NAN
                totalPrice:0,
            };
            s.car.forEach(v => {
                if ( v.isbuy ) {
                    o.totalNum += parseInt(v.num);
                    o.totalPrice += parseInt(v.price) * v.num;
                }
            })
            return o;
        },
    }
})

new Vue({
    el: '#app',
    render: el => el( app ),
    router,
    store, // 挂载 vuex 状态管理对象
    /* 调试 Toast 导入挂载的问题
    methods:{
        a(){
            // Toast('111');
            console.log(this.$toast)
            this.$toast('333')
        }
    },*/
    created(){
        console.log(this)
    } 
})